<script setup>
defineProps({
  data: {
    type: Array,
    default: () => [],
  },
})

const columns = [
  {
    title: '作业类别',
    key: 'jobType',
    align: 'center',
  },
  {
    title: '今日作业',
    key: 'todayWork',
    align: 'center',
    children: [
      {
        title: '纸质',
        key: 'todayPaperNum',
        align: 'center',
        ellipsis: {
          tooltip: true,
        },
      },
      {
        title: '多媒体',
        key: 'todayMultiNum',
        align: 'center',
        ellipsis: {
          tooltip: true,
        },
      },
    ],
  },
  {
    title: '年度作业',
    key: 'yearWork',
    align: 'center',
    children: [
      {
        title: '纸质',
        key: 'annualPaperNum',
        align: 'center',
        ellipsis: {
          tooltip: true,
        },
      },
      {
        title: '多媒体',
        key: 'annualMultiNum',
        align: 'center',
        ellipsis: {
          tooltip: true,
        },
      },
    ],
  },
]
</script>

<template>
  <section class="mt-16px">
    <n-data-table
      :data="data"
      :columns="columns"
      :single-line="false"
      :single-column="true"
      :striped="true"
    />
  </section>
</template>

<style lang='scss' scoped>
::v-deep {
  .n-data-table-wrapper {
    border-color: #63C0FA !important;
  }

  .n-data-table .n-data-table-table {
    background-color: transparent;
  }

  .n-data-table .n-data-table-thead{
    color: #80E3FB;
    background-color: transparent;
    // border-color: #63C0FA;
  }

  // .n-data-table .n-data-table-tbody{
  //   border-color: #63C0FA;
  // }

  .n-data-table .n-data-table-th{
    padding: 8px;
    color: #80E3FB;
    background-color: #009DE333;
    border-color: #63C0FA;
  }

  .n-data-table .n-data-table-tr {
    background-color: transparent;

    .n-data-table-td {
      color: #FFF;
      background-color: #009DE311;
      border: none;
    }

    &.n-data-table-tr--striped {
      .n-data-table-td {
        background-color: #009DE333;
      }

      // &: {
      //   border: 1px solid;
      //   border-image: linear-gradient(90deg, rgb(99 192 250 / 0%), #63c0fa 54%, rgb(99 192 250 / 0%) 100%) 1 1;
      // }
    }

  }

  &.n-data-table-tr--striped:nth-of-type(1) {
    border: 1px solid;
    border-image: linear-gradient(90deg, rgb(99 192 250 / 0%), #63c0fa 54%, rgb(99 192 250 / 0%) 100%) 1 1;
  }
}
</style>
